import type {App, Directive} from 'vue';
import {useAuthStore} from '@/store';
import {useRouterPush} from '@/composables';

export default function setupLoginDirective(app: App) {
    const auth = useAuthStore();
    const {toLogin} = useRouterPush(false);

    function listenerHandler(event: MouseEvent) {
        if (!auth.isLogin) {
            event.stopPropagation();
            toLogin();
        }
    }

    const loginDirective: Directive<HTMLElement, boolean | undefined> = {
        mounted(el: HTMLElement, binding) {
            if (binding.value === false) return;
            el.addEventListener('click', listenerHandler, {capture: true});
        },
        unmounted(el: HTMLElement, binding) {
            if (binding.value === false) return;
            el.removeEventListener('click', listenerHandler);
        }
    };

    app.directive('login', loginDirective);
}
